<template>
  <div class="role">
    <PageSearch
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></PageSearch>
    <PageContent
      @edit-click="handleEditClick"
      @new-click="handleNewClick"
      ref="contentRef"
      :content-config="contentConfig"
    ></PageContent>
    <PageModal
      ref="modelRef"
      :otherInfo="otherInfo"
      :model-config="modalConfig"
    >
      <template #menulist>
        <el-tree
          ref="treeRef"
          :data="entireMenus"
          show-checkbox
          default-expand-all
          node-key="id"
          highlight-current
          :props="{ children: 'children', label: 'name' }"
          @check="handleElTreeClick"
        />
      </template>
    </PageModal>
  </div>
</template>
<script setup lang="ts">
import PageSearch from '@/components/page-search/page-search.vue'
import searchConfig from './config/search.config'

import PageContent from '@/components/page-content/page-content.vue'

import PageModal from '@/components/page-modal/page-modal.vue'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import usePageModal from '@/hooks/usePageModal'
import usePageCountent from '@/hooks/usePageContent'
import useMainStore from '@/store/main/main'
import { storeToRefs } from 'pinia'
import { ref, nextTick } from 'vue'
import type { ElTree } from 'element-plus'
import { mapMenusToId } from '@/utils/map-menus'

// 逻辑关系
const { contentRef, handleQueryClick, handleResetClick } = usePageCountent()
const { modelRef, handleNewClick, handleEditClick } = usePageModal(
  newCallback,
  editCallback
)
// 获取完整菜单
const mainStore = useMainStore()
const { entireMenus } = storeToRefs(mainStore)
// 其他信息
const otherInfo = ref({})
function handleElTreeClick(data1, data2) {
  // console.log(data1, data2)
  const menuList = [...data2.checkedKeys, ...data2.halfCheckedKeys]
  otherInfo.value = { menuList }
  // console.log(menuList)
}
// 数据回传显示
const treeRef = ref<InstanceType<typeof ElTree>>()
// 新建的回显
function newCallback() {
  nextTick(() => {
    treeRef.value?.setCheckedKeys([])
  })
}
// 传给啦hooks
function editCallback(itemData: any) {
  console.log(itemData.menuList)
  // 取出id
  const menuListIds = mapMenusToId(itemData.menuList)
  nextTick(() => {
    treeRef.value?.setCheckedKeys(menuListIds)
  })
}
</script>
<style lang="less" scoped></style>
